<template>
  <div style="overflow: hidden;">
    <div class="page">
      <Page
        :total="page.total"
        :page-size="page.pageSize"
        :page-size-opts="[10, 15, 20, 25]"
        show-elevator
        show-sizer
        @on-change="pageNumChange"
        @on-page-size-change="pageSizeChange"
        show-total>
      </Page>
    </div>
  </div>
</template>

<script>
export default {
  name: 'page-info',
  data () {
    return {}
  },
  methods: {
    pageNumChange (num) {
      this.page.pageNum = num
      this.$emit('pageNumChange', this.page)
    },
    pageSizeChange (size) {
      this.page.pageSize = size
      this.$emit('pageSizeChange', this.page)
    }
  },
  props: ['page'],
  created () {}
}
</script>

<style scoped>
  .page{
    margin-top: 16px;
    float: right;
  }
</style>
